<template>
    <div class="wrap">
        <vue-office-docx v-if="fileType === 'docx' || fileType === 'doc'" :src="filePath" class="box"
            @rendered="rendered" @error="HandlError" />
        <vue-office-pdf v-else-if="fileType === 'pdf'" :src="filePath" class="box" @rendered="rendered"
            @error="HandlError" />
        <vue-office-excel v-else-if="fileType === 'xlsx' || fileType === 'xls'" :src="filePath" class="box"
            @rendered="rendered" @error="HandlError" />
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
//引入相关样式
import "@vue-office/docx/lib/index.css";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePdf from "@vue-office/pdf";

@Component({
    components: {
        VueOfficeDocx,
        VueOfficeExcel,
        VueOfficePdf,
    }
})

export default class PreviewFile extends Vue {
    loading = true
    filePath = "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"  // 预览地址
    fileType = "pdf" // 文件类型
    /* pdf,word组件渲染完毕 */
    rendered() {
        console.log('组件渲染完毕')
        this.loading = false;
    }
    /* pdf,word组件渲染出错 */
    HandlError(errorInfo?: any) {
        console.error("该文件暂不支持在线预览", errorInfo);
        this.loading = false;
    }
}
</script>

<style scoped>
.box {
    height: calc(100vh - 120px);
}
</style>